<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理已选课程</title>
    <script src="js/base.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        h1 span {
            color: #007BFF;
            font-weight: bold;
        }
        table {
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        th {
            background-color: #007BFF;
            color: white;
        }
        td a {
            color: #FF5722;
            text-decoration: none;
            font-weight: bold;
        }
        td a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1><span id="sname"></span>的已选课程</h1>
<script>
    document.getElementById("sname").innerHTML=localStorage.getItem("sname");
</script>
<table id="courseData"border="1px">
    <tr>
        <td>课程号</td>
        <td>课程名称</td>
        <td>授课教师</td>
        <td>教室容量</td>
        <td>当前选课人数</td>
        <td colspan="3" align="center">操作</td>
    </tr>
    <script>
        let studentId=localStorage.getItem("sid");
        let pageNo=1;
        let pageSize=5;
        let pageCount=0;
        let arr=null;
        function loadData(){
            let url="http://localhost:8080/student/page?pageNo="+pageNo+"&pageSize="+pageSize+"&studentId="+studentId+"&state=1";
            $.rest(url,"get",null,function (r){
                if (r.code==200){
                    arr=r.data.data;
                    pageCount=r.data.pageCount;
                    let courseDataInnerHTML="<tr>\n" +
                        "            <td>课程号</td>\n" +
                        "            <td>课程名称</td>\n" +
                        "            <td>授课教师</td>\n" +
                        "            <td>教室容量</td>\n" +
                        "            <td>当前选课人数</td>\n" +
                        "            <td colspan=\"3\">操作</td>\n" +
                        "        </tr>";
                    for(let i=0;i<arr.length;i++){
                        let item=arr[i];
                        courseDataInnerHTML=courseDataInnerHTML+"<tr>" +
                            "<td>"+item.id+"</td>" +
                            "<td>"+item.name+"</td>" +
                            "<td>"+item.tname+"</td>" +
                            "<td>"+item.maxLimit+"</td>" +
                            "<td>"+item.count+"</td>" +
                            "<td colspan='3'><a href='#' onclick='return onUnSelectClick("+(i)+")'>不选这门课了</a></td>" +
                            "</tr>";
                    }
                    document.getElementById("courseData").innerHTML= courseDataInnerHTML;

                }
            });
        }
        loadData();

        function onUnSelectClick(index){
            let item=arr[index];
            let courseId=item.id;
            let url="http://localhost:8080/student/editCourseState?studentId="+studentId+"&courseId="+courseId+"&state=0";
            $.rest(url,"get",null,function (r){
                if (r.code==200){
                    alert("取消成功");
                }else{
                    alert("取消失败");
                }
                loadData();
            });
        }
    </script>

</table>
</body>
</html>